import React, {useContext, useEffect, useRef, useState} from "react";
import {Overlay} from "react-native-elements";
import {
    Dimensions,
    ImageBackground,
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    TextInput,
    TouchableWithoutFeedback, Keyboard, ScrollView
} from "react-native";
import {TouchableHighlight} from "react-native-gesture-handler";
import blueLogo from "../assets/chat/blueLogo.png"
import redLogo from "../assets/chat/redLogo.png"
import tranSuccess from "../assets/chat/tranSuccess.png"
import traning from "../assets/chat/traning.png"
import tranFalse from "../assets/chat/tranFalse.png"
import {timeFormat} from "../libs/helpers";
import Clipboard from "@react-native-community/clipboard";
import Toast from "react-native-simple-toast";
import LocaleContext from "../libs/locale";

const {width, height} = Dimensions.get("window");

const ChatInput = ({msg,visible,back,sending}:any) => {
    const locale:any = useContext(LocaleContext);
    const [SendMsg,setSendMsg] = useState(msg);
    const [Remain,setRemain] = useState(1000);
    const ref_input = useRef(null) as  React.MutableRefObject<any>;

    return(
        (visible !== false)?(
                <View style={styles.body}>
                    <View style={styles.container}>
                        <View style={styles.head}>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                onPress={()=>{
                                    back({type:"return",msg:false})
                                }}>
                                <Text style={{marginLeft:width*0.05}}>
                                    取消
                                </Text>
                            </TouchableOpacity>
                            <View style={{flex:1,justifyContent:"center",flexDirection:"row",paddingLeft:25}}>
                                <Text >
                                    发消息
                                </Text>
                            </View>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                disabled={sending}
                                onPress={()=>{
                                    if(SendMsg=="")
                                    {
                                        return;
                                    }
                                    setSendMsg("")
                                    setRemain(1000)
                                    back({type:"send",msg:false})
                                }}>
                                <View style={{backgroundColor:"#3C9FF3",padding:7,paddingLeft:13,paddingRight:13,borderRadius:5,alignItems:"center",flexDirection:"row",justifyContent:"center",marginRight:width*0.05}}>
                                    <Text style={{color:"#fff"}}>
                                        发送
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <ScrollView style={{width:width,height:height*0.94}}>
                            <View style={styles.input}>
                                <TouchableOpacity
                                    activeOpacity={1}
                                    style={{
                                        flex:1,padding:10,
                                        flexDirection:"column",alignItems:"flex-start",
                                        justifyContent:"flex-start"}}
                                    onPress={()=>{
                                        (ref_input as any).current.focus();
                                    }}
                                >
                                    <TextInput
                                        style={{fontSize:width/360*16,letterSpacing:1,lineHeight:width/360*20,}}
                                        underlineColorAndroid={'transparent'}
                                        blurOnSubmit={false}
                                        multiline={true}
                                        maxLength={1000}
                                        ref={ref_input}
                                        autoFocus={true}
                                        value={SendMsg}
                                        onFocus={() => {}}
                                        onChangeText={
                                            (value) => {
                                                let length = value.length;
                                                setRemain(1000-length);
                                                setSendMsg(value);
                                                back({type:"changeText",msg:value})
                                            }
                                        }
                                    />
                                </TouchableOpacity>

                            </View>
                            <View style={styles.white}>
                                <View style={{flexDirection:"column",alignItems:"flex-end",flex:1,paddingTop:25,paddingRight:10+width*0.05}}>
                                    <Text>
                                        还可以输入{Remain}字
                                    </Text>
                                </View>
                            </View>
                        </ScrollView>
                    </View>

                </View>
            )
            :null
    )
};
const styles = StyleSheet.create({
    body:{
        position:"absolute",
        top:0,
        left:0,
        right:0,
        bottom:0,
        // marginTop:-height*0.94,
        height:height*0.94,
        width:width,
        backgroundColor:"#0000009e",
    },
    container:{
        flex:1,
        backgroundColor:"#F6F6F6",
        alignItems:"center"
    },
    head:{
        height:60,
        padding:10,
        flexDirection:"row",
        alignItems:"center"
    },
    input:{
        width:width*0.9-20,
        height:width*0.6-20,
        borderRadius:10,
        backgroundColor:"#fff",
        alignSelf:"center"
    },
    white:{
        width:width,
        height:height,
        backgroundColor:"#F6F6F6",
        flexDirection:"column",
    }

});
// export default ChatInput;
